<template>
  <view class="login">
    <text class="info">房屋信息</text>
    <view class="house-location">
      北京西三旗花园1号楼 101
    </view>
    <text class="info">业主信息</text>
    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
    <u--form labelPosition="left" :model="form" ref="uForm" :rules="rules">
      <u-form-item prop="repairItemId" borderBottom ref="item1" label="维修项目" labelWidth="208rpx">
        <u--input v-model="form.repairItemId" placeholder-style="color:#979797" placeholder="请选择" border="none">
        </u--input>
        <block slot="right">
          <view class="code-btn">
            <view>
              <u-icon name="arrow-right" @click="show1 = true"></u-icon>
            </view>
          </view>
        </block>
      </u-form-item>
      <!--  -->
      <u-form-item borderBottom ref="item1" label="手机号" labelWidth="208rpx">
        <u--input v-model="form.mobile" placeholder-style="color:#979797" placeholder="请输入您的手机号" border="none">
        </u--input>
      </u-form-item>
      <!--  -->
      <u-form-item borderBottom ref="item1" label="预约日期" labelWidth="208rpx">
        <u--input v-model="form.appointment" placeholder-style="color:#979797" placeholder="请选择上门维修日期" border="none">
        </u--input>
        <block slot="right">
          <view class="code-btn" @click="show = true">
            <view>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
        </block>
      </u-form-item>
    </u--form>
    <view style="background-color: #fff;">
      <view class="psd">
        <rich-text nodes="<h5>问题描述</h5>"></rich-text>
        <u--textarea v-model="form.description" placeholder="请填写详细报修内容，有助于工作人员快速帮您解决问题。" border='none'>
        </u--textarea>
      </view>
    </view>
    <view style="background-color:#fff;width: 750rpx;height: 300rpx;">
      <view class="psd"></view>
      <rich-text nodes="<br></br>"></rich-text>
      <rich-text nodes="<h5>问题附件</h5>"></rich-text>
      <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"
        :previewFullImage="true">
      </u-upload>
      <image :src="url" mode="widthFix" style="width: 50px;height: 50px;"></image>
    </view>
    <!-- 提交 -->
    <view class="btn" @click='check'>
      <image src="../../static/icon/repair.png" />
      <text>提交报修</text>
    </view>
    <!-- 维修时间 -->
    <u-datetime-picker ref="datetimePicker" :show="show" v-model="value1" mode="date" :formatter="formatter"
      @cancel='show=false' title='选择上门日期' @confirm='changeTime' closeOnClickOverlay='true'>
    </u-datetime-picker>
    <!-- 维修项目 -->
    <u-picker :show="show1" :columns="columns" @cancel='show1=false' title='选择报修房屋' @confirm='confirm'></u-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        url: "",
        fileList: [{
          url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
        }],
        show1: false,
        show: false,
        value1: Number(new Date()),
        columns: [
          ['水路卫浴', '电路灯具', '管道疏通', '开锁换锁']
        ],
        form: {
          mobile: "18900000000",
          repairItemId: '',
          appointment: '',
          description: ""
        },
        rules: {
          // appointment: [{
          //   required: true,
          //   message: '请选择上门维修日期',
          //   trigger: ['change', 'blur'],
          // }],
          // repairItemId: [{
          //   required: true,
          //   message: '请选择维修项目',
          //   trigger: ['change', 'blur'],
          // }],
          mobile: [{
              required: true,
              message: '请输入手机号',
              trigger: ['change', 'blur'],
            },
            {
              pattern: /^((\+|00)86)?1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/,
              message: '手机号码格式不正确',
              trigger: ['change', 'blur'],
            }
          ],
        }
      };
    },
    onLoad() {},
    methods: {
      // 删除图片
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },
      // 新增图片
      async afterRead(event) {
        console.log(event.file[0].url);
        this.url = event.file[0].url
        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
        let lists = [].concat(event.file)
        let fileListLen = this[`fileList${event.name}`].length
        lists.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url)
          let item = this[`fileList${event.name}`][fileListLen]
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
          }))
          fileListLen++
        }
      },
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
            filePath: url,
            name: 'file',
            formData: {
              user: 'test'
            },
            success: (res) => {
              setTimeout(() => {
                resolve(res.data.data)
              }, 1000)
            }
          });
        })
      },
      // 确认维修项目
      confirm(e) {
        console.log(e);
        this.form.repairItemId = e.value[0]
        this.show1 = false
      },
      // 改变时间
      changeTime(e) {
        const timeFormat = uni.$u.timeFormat
        console.log(timeFormat(e.value, 'yyyy-mm-dd'))
        this.form.appointment = timeFormat(e.value, 'yyyy-mm-dd')
        this.show = false
      },
      //时间选择
      formatter(type, value) {
        if (type === 'year') {
          return `${value}年`
        }
        if (type === 'month') {
          return `${value}月`
        }
        if (type === 'day') {
          return `${value}日`
        }
        return value
      },
      // 提交审核
      check() {
        uni.switchTab({
          url: '/pages/my/my'
        })
      }
    },
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
      this.$refs.uForm.setRules(this.rules);
      // 微信小程序需要用此写法
      this.$refs.datetimePicker.setFormatter(this.formatter)

    }
  }
</script>

<style lang="less">
  .code-btn {
    // position: relative;
    width: 40rpx;
    height: 40rpx;
    // background-color: pink;
    // display: flex;
    // align-items: center;
    // justify-content: center;

    view {
      // left: 10rpx;
      // top: 10rpx;
      // position: absolute;
      width: 30rpx;
      height: 30rpx;
      // background-color: red;
    }
  }

  .info {
    color: #979797;
    font-weight: regular;
    font-size: 24rpx;
    padding: 30rpx 0 20rpx 30rpx;
    line-height: 1.5;
  }

  .info1 {
    background: #FAFAFA;
    color: #979797;
    font-family: PingFang SC;
    font-weight: regular;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0px;
    text-align: center;
  }

  .psd1 {
    position: fixed;
    bottom: 0;
    background-color: red;
    margin-top: 20rpx;
    width: 750rpx;
    height: 80rpx;
  }

  .psd {
    margin-top: 20rpx;
    width: 750rpx;
    height: 80rpx;
  }

  text {
    color: #5591AF;
  }

  image {
    top: -20px;
    width: 50rpx;
    height: 50rpx;
    margin-bottom: 20rpx;
  }

  .btn {
    position: fixed;
    bottom: 0;
    width: 750rpx;
    height: 200rpx;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30rpx;

    image {
      width: 50rpx;
      height: 50rpx;
      margin-bottom: 20rpx;
    }

    text {
      color: #333333;
    }
  }

  .login {
    padding: 0 30rpx;
    background: #FAFAFA;
    min-height: 80%;

    .house-location {
      background-color: #fff;
      padding: 30rpx 0 30rpx 30rpx;
      font-size: 28rpx
    }

    ::v-deep .u-form {
      background-color: #fff;

      .item__body__right__content__icon {
        color: #5591AF;
      }

    }

    ::v-deep .u-count-down__text {
      color: #5591AF;
    }


    ::v-deep .u-form-item__body {
      padding-left: 30rpx;
      padding-right: 30rpx;

      .u-count-down__text {
        color: #5591AF;
        font-size: 28rpx;
      }
    }
  }
</style>
